<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>BI Component - Orgnization Heirarchy</title>
    <link rel="Stylesheet" type="text/css" href="../../theme/css/style_reset.css" />
    <!--[if IE 8]><link rel="stylesheet" type="text/css" href="../../theme/css/style-ie8.css" /><![endif]-->
    <!--[if IE 9]><link rel="stylesheet" type="text/css" href="../../theme/css/style-ie9.css" /><![endif]-->
    <link href="../../../ybo_integration/Tmp/css/normalize.css" type="text/css" rel="stylesheet" media="screen">
    <link href="../../../ybo_integration/Tmp/css/group.css" type="text/css" rel="stylesheet" media="screen">
    <link href="../../../ybo_integration/Tmp/css/grid.css" type="text/css" rel="stylesheet" media="screen">
    <link href="../../../ybo_integration/Tmp/css/jquery.dropdown_navigation.css" type="text/css" rel="stylesheet" media="screen">

    <script type="text/JavaScript" src="../../api/js/jquery-1.8.3.js"></script>
    <script src="../../../ybo_integration/Tmp/js/jquery.dropdown_navigation.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../api/js/jquery.cookie.js"></script>
    <script type="text/JavaScript" src="../../theme/script/jquery.easing.1.3.js"></script>
    <script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>

    <!-- [REQUIRED] SCRIPT FOR INTEGRATION WITH BOI -->
    <script type="text/javascript">
        var BOI = parent.BOI; //REQUIRED
        var properties = { //REQUIRED
            varname: "",
            height: "50%"
        };
        window.onload = function () {
            //sample registeration for an event
            //register listener function for an event

        }
        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            /*---- begin your component custom initialization code ----*/
            //example to set property values to dom elements
            refreshProperties();
            //load the tree
            load();
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var refreshProperties = function refreshProperties() { //REQUIRED function to be called by parent when a property change occurs
        };
    </script>

    <script type="text/javascript">
        var counter_of_loading = 0;
        var selectedVariable = [];

        // some global variables
          var levelCount = 1,
              menuJson;

          function getChildren( json ){
            if( typeof json == "object"  ){
              if ( json[0]['children'].length == 1 ){
                levelCount++;
                return getChildren( json[0]['children'] );
              }
              else
                return  json[0]['children'];
            }
          }

          function li_render(li_list,ul){
            for (var i = 0 ; i < li_list.length  ; i++) {
              var title = li_list[i].title,
                description = li_list[i].description,
                url = li_list[i].href? li_list[i].href:'#',
                key = li_list[i].key;
                anch_context = '<a href="' + url + '"  onclick="openRep('+key+')">' + title + '</a>',
                children = li_list[i].children;
                $(ul).append('<li>').find('li:last').append(anch_context);

              if (children && children.length > 0){
                var tmp_ul = $(ul).children().last();
                tmp_ul.append('<ul>');
                tmp_ul = tmp_ul.children().last();

                li_render(children, tmp_ul );
              }
            }
          }

        function report_catalog(data) {
           menuJson = getChildren( data );
           window.myJson = menuJson;
           li_render(myJson, ul);
           $('#main-navigation').dropdownNavigation();
        }
        $(document).ready(function () {
            $('#main-navigation').append('<ul>'); window.ul = $('ul');

         });

        function getSelectedValues() {
            var selKeys = $('.hierarchy').dynatree("getSelectedNodes");
            for (var i in selKeys) {
                selectedVariable.push(selKeys[i].data.key);
            }
            BOI.Events.raiseEvent(BOI.Events.repopen, [selectedVariable]);
        }
        function load() {

            //TODO: use BOI.app_id instead of hardcoded AC_DB, and set to USER MODE
            //BOI.app_id="TEST_BI_APP";
            BOI.loadReportCatalog(BOI.app_id, 'JSON', function () {
                report_catalog(BOI.context.reportCatalogJSON);
                // "ADMIN" or "USER"
            }, "ADMIN");
        }
        openRep
    </script>

</head>
<body>

<div class="row">
  <div class="column grid_12">
    <nav id="main-navigation" class="dropdown-navigation">

    </nav>
  </div>
</div>

</body>

</html>